<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简谱打谱软件</title>
  <!-- 替换在线资源为本地 -->
  <script src="libs/tailwindcss/tailwind.min.js"></script>
  <link href="libs/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <script src="libs/jspdf/jspdf.umd.min.js"></script>
  <script src="libs/html2canvas/html2canvas.min.js"></script>
  <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-music text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-neutral-dark">简谱打谱软件</h1>
      </div>
      
      <div class="flex items-center space-x-3">
        <button id="new-btn" class="btn btn-outline">
          <i class="fa fa-file-o mr-1"></i> 新建
        </button>
        <button id="save-btn" class="btn btn-primary">
          <i class="fa fa-save mr-1"></i> 保存
        </button>
        <button id="projects-btn" class="btn btn-outline">
          <i class="fa fa-folder-open-o mr-1"></i> 项目
        </button>
        <button id="import-btn" class="btn btn-outline">
          <i class="fa fa-upload mr-1"></i> 导入
        </button>
        <button id="export-btn" class="btn btn-secondary">
          <i class="fa fa-download mr-1"></i> 导出PDF
        </button>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 左侧控制面板 -->
    <div class="lg:col-span-1 space-y-4">
      <!-- 基本信息 -->
      <div id="basic-info" class="section-card">
        <!-- 内容由JavaScript动态生成 -->
      </div>

      <!-- 简谱输入 -->
      <div id="sheet-input" class="section-card">
        <!-- 内容由JavaScript动态生成 -->
      </div>
    </div>
    
    <!-- 右侧预览区 -->
    <div class="lg:col-span-2">
      <div id="sheet-preview-container" class="section-card h-full">
        <!-- 内容由JavaScript动态生成 -->
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-4">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
      <p>简谱打谱软件 &copy; 2025 | 使用 HTML, JavaScript 和 Tailwind CSS 构建</p>
    </div>
  </footer>

  <!-- 项目管理对话框 -->
  <div id="projects-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="projects-modal-content">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-semibold">我的项目</h3>
        <button id="close-projects-btn" class="text-gray-400 hover:text-gray-600">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <div class="relative">
            <input type="text" id="project-search" placeholder="搜索项目..." class="pl-9 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
          <button id="refresh-projects-btn" class="btn btn-outline text-sm">
            <i class="fa fa-refresh mr-1"></i> 刷新
          </button>
        </div>
        
        <div id="projects-list" class="max-h-[400px] overflow-y-auto border border-gray-200 rounded-md">
          <!-- 项目列表由JavaScript动态生成 -->
          <div class="text-center text-gray-400 py-12">
            暂无保存的项目
          </div>
        </div>
        
        <div class="flex justify-end space-x-3 pt-2">
          <button id="close-projects-modal-btn" class="btn btn-outline">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 保存项目对话框 -->
  <div id="save-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="save-modal-content">
      <h3 class="text-xl font-semibold mb-4">保存项目</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
          <input type="text" id="save-project-name" class="input-field" placeholder="请输入项目名称">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">项目描述</label>
          <textarea id="save-project-description" rows="2" class="input-field" placeholder="请输入项目描述（可选）"></textarea>
        </div>
        <div class="flex justify-end space-x-3 pt-2">
          <button id="cancel-save-btn" class="btn btn-outline">取消</button>
          <button id="confirm-save-btn" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 导出PDF确认对话框 -->
  <div id="export-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="export-modal-content">
      <h3 class="text-xl font-semibold mb-4">导出PDF</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">文件名</label>
          <input type="text" id="pdf-filename" class="input-field" value="简谱" placeholder="请输入文件名">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">页面设置</label>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-xs text-gray-500 mb-1">方向</label>
              <select id="pdf-orientation" class="input-field">
                <option value="portrait">纵向</option>
                <option value="landscape">横向</option>
              </select>
            </div>
            <div>
              <label class="block text-xs text-gray-500 mb-1">纸张大小</label>
              <select id="pdf-size" class="input-field">
                <option value="a4">A4</option>
                <option value="letter">Letter</option>
                <option value="legal">Legal</option>
              </select>
            </div>
          </div>
        </div>
        <div class="flex justify-end space-x-3 pt-2">
          <button id="cancel-export-btn" class="btn btn-outline">取消</button>
          <button id="confirm-export-btn" class="btn btn-secondary">确认导出</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 导入文件对话框 -->
  <div id="import-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="import-modal-content">
      <h3 class="text-xl font-semibold mb-4">导入项目</h3>
      <div class="space-y-4">
        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
          <i class="fa fa-upload text-4xl text-gray-400 mb-3"></i>
          <p class="mb-2">拖放文件到此处，或</p>
          <label class="btn btn-outline inline-flex items-center cursor-pointer">
            <i class="fa fa-file-text-o mr-1"></i> 选择文件
            <input type="file" id="import-file" accept=".json,.xml,.txt" class="hidden">
          </label>
        </div>
        <div class="text-center text-sm text-gray-500">
          支持的格式：JSON (.json), XML (.xml), 文本 (.txt)
        </div>
        <div class="flex justify-end space-x-3 pt-2">
          <button id="cancel-import-btn" class="btn btn-outline">取消</button>
          <button id="confirm-import-btn" class="btn btn-primary" disabled>确认导入</button>
        </div>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
  <script src="storage.js"></script>
  <script src="ui.js"></script>
  <script src="export.js"></script>
  <script src="import.js"></script>
</body>
</html>
    